<script setup lang="ts">
import { watch, ref } from 'vue'
import { SunoMedia } from '@/api/sunoStore';
import { homeStore } from '@/store';
import { NImage, NEmpty } from 'naive-ui';
import { SvgIcon } from '@/components/common'
import { useRoute } from 'vue-router'
import axios from 'axios';
import { getToken } from '@/store/modules/auth/helper';
const route = useRoute()
console.log("🚀 ~ route:", route)
if (route.query.id) {
    axios.get(`/api/suno/GetMusic?musicId=${route.query.id}`, { headers: { token: getToken() } }).then(res => {
        // console.log(res.data);
        pObj.value = res.data.data[0] as SunoMedia

    })
}
const isShare = ref<boolean>(!!route.query.id)

// const getData = () => {
//     axios.post('', FormData, {}).then(res => {
//     })

// }
const pObj = ref<SunoMedia>()
watch(() => homeStore.myData.act, (n) => {
    if (n == 'goPlay') {
        let data = homeStore.myData.actData
        console.log("🚀 ~ watch ~ data:", data)
        pObj.value = data as SunoMedia


    }
})
</script>
<template>
    <div v-if="pObj">
        <div class="w-full  relative h-[300px]">
            <!-- {{ pObj }} -->
            <NImage :src="pObj.image_large_url" class="w-full h-full">
                <template #placeholder>
                    <div class="w-full h-full justify-center items-center flex">
                        <SvgIcon icon="line-md:downloading-loop" class="text-[60px] text-green-300"></SvgIcon>
                    </div>
                </template>
            </NImage>
            <div class="absolute bottom-0 right-0 p-2 text-white text-right">
                <h2 class=" text-xl">{{ pObj.title }}</h2>
                <div class="">{{ $t('suno.style') }}：{{ pObj.metadata.tags }}</div>
            </div>
        </div>
        <audio :src="pObj.audio_url" v-if="isShare" controls style="margin: 20px auto;"></audio>

        <pre class=" text-wrap p-2">{{ pObj.metadata.prompt }}</pre>
    </div>
    <div class=" flex w-full h-full justify-center items-center" v-else>
        <n-empty :description="$t('suno.emputy')"></n-empty>
    </div>

</template>